@use "sass:meta";

$color__white: #FCFCFC;
$color__gray: #848E94;
$color__black: #000E16;
$color__blue: #2A81BB;
$color__green: #27AE60;
$color__red: #ED2B38;
$color__yellow: #CA0;

// Black
$color__black--050: #{mix($color__white, $color__gray, 90%)};
$color__black--100: #{mix($color__white, $color__gray, 80%)};
$color__black--150: #{mix($color__white, $color__gray, 70%)};
$color__black--200: #{mix($color__white, $color__gray, 60%)};
$color__black--250: #{mix($color__white, $color__gray, 50%)};
$color__black--300: #{mix($color__white, $color__gray, 40%)};
$color__black--350: #{mix($color__white, $color__gray, 30%)};
$color__black--400: #{mix($color__white, $color__gray, 20%)};
$color__black--450: #{mix($color__white, $color__gray, 10%)};
$color__black--500: #{mix($color__white, $color__gray,  0%)};
$color__black--550: #{mix($color__black, $color__gray, 10%)};
$color__black--600: #{mix($color__black, $color__gray, 20%)};
$color__black--650: #{mix($color__black, $color__gray, 30%)};
$color__black--700: #{mix($color__black, $color__gray, 40%)};
$color__black--750: #{mix($color__black, $color__gray, 50%)};
$color__black--800: #{mix($color__black, $color__gray, 60%)};
$color__black--850: #{mix($color__black, $color__gray, 70%)};
$color__black--900: #{mix($color__black, $color__gray, 80%)};
$color__black--950: #{mix($color__black, $color__gray, 90%)};

// Blue
$color__blue--050: #{mix($color__white, $color__blue, 90%)};
$color__blue--100: #{mix($color__white, $color__blue, 80%)};
$color__blue--150: #{mix($color__white, $color__blue, 70%)};
$color__blue--200: #{mix($color__white, $color__blue, 60%)};
$color__blue--250: #{mix($color__white, $color__blue, 50%)};
$color__blue--300: #{mix($color__white, $color__blue, 40%)};
$color__blue--350: #{mix($color__white, $color__blue, 30%)};
$color__blue--400: #{mix($color__white, $color__blue, 20%)};
$color__blue--450: #{mix($color__white, $color__blue, 10%)};
$color__blue--500: #{mix($color__white, $color__blue,  0%)};
$color__blue--550: #{mix($color__black, $color__blue, 10%)};
$color__blue--600: #{mix($color__black, $color__blue, 20%)};
$color__blue--650: #{mix($color__black, $color__blue, 30%)};
$color__blue--700: #{mix($color__black, $color__blue, 40%)};
$color__blue--750: #{mix($color__black, $color__blue, 50%)};
$color__blue--800: #{mix($color__black, $color__blue, 60%)};
$color__blue--850: #{mix($color__black, $color__blue, 70%)};
$color__blue--900: #{mix($color__black, $color__blue, 80%)};
$color__blue--950: #{mix($color__black, $color__blue, 90%)};

// Green
$color__green--050: #{mix($color__white, $color__green, 90%)};
$color__green--100: #{mix($color__white, $color__green, 80%)};
$color__green--150: #{mix($color__white, $color__green, 70%)};
$color__green--200: #{mix($color__white, $color__green, 60%)};
$color__green--250: #{mix($color__white, $color__green, 50%)};
$color__green--300: #{mix($color__white, $color__green, 40%)};
$color__green--350: #{mix($color__white, $color__green, 30%)};
$color__green--400: #{mix($color__white, $color__green, 20%)};
$color__green--450: #{mix($color__white, $color__green, 10%)};
$color__green--500: #{mix($color__white, $color__green,  0%)};
$color__green--550: #{mix($color__black, $color__green, 10%)};
$color__green--600: #{mix($color__black, $color__green, 20%)};
$color__green--650: #{mix($color__black, $color__green, 30%)};
$color__green--700: #{mix($color__black, $color__green, 40%)};
$color__green--750: #{mix($color__black, $color__green, 50%)};
$color__green--800: #{mix($color__black, $color__green, 60%)};
$color__green--850: #{mix($color__black, $color__green, 70%)};
$color__green--900: #{mix($color__black, $color__green, 80%)};
$color__green--950: #{mix($color__black, $color__green, 90%)};

// Red
$color__red--050: #{mix($color__white, $color__red, 90%)};
$color__red--100: #{mix($color__white, $color__red, 80%)};
$color__red--150: #{mix($color__white, $color__red, 70%)};
$color__red--200: #{mix($color__white, $color__red, 60%)};
$color__red--250: #{mix($color__white, $color__red, 50%)};
$color__red--300: #{mix($color__white, $color__red, 40%)};
$color__red--350: #{mix($color__white, $color__red, 30%)};
$color__red--400: #{mix($color__white, $color__red, 20%)};
$color__red--450: #{mix($color__white, $color__red, 10%)};
$color__red--500: #{mix($color__white, $color__red,  0%)};
$color__red--550: #{mix($color__black, $color__red, 10%)};
$color__red--600: #{mix($color__black, $color__red, 20%)};
$color__red--650: #{mix($color__black, $color__red, 30%)};
$color__red--700: #{mix($color__black, $color__red, 40%)};
$color__red--750: #{mix($color__black, $color__red, 50%)};
$color__red--800: #{mix($color__black, $color__red, 60%)};
$color__red--850: #{mix($color__black, $color__red, 70%)};
$color__red--900: #{mix($color__black, $color__red, 80%)};
$color__red--950: #{mix($color__black, $color__red, 90%)};

// Yellow
$color__yellow--050: #{mix($color__white, $color__yellow, 90%)};
$color__yellow--100: #{mix($color__white, $color__yellow, 80%)};
$color__yellow--150: #{mix($color__white, $color__yellow, 70%)};
$color__yellow--200: #{mix($color__white, $color__yellow, 60%)};
$color__yellow--250: #{mix($color__white, $color__yellow, 50%)};
$color__yellow--300: #{mix($color__white, $color__yellow, 40%)};
$color__yellow--350: #{mix($color__white, $color__yellow, 30%)};
$color__yellow--400: #{mix($color__white, $color__yellow, 20%)};
$color__yellow--450: #{mix($color__white, $color__yellow, 10%)};
$color__yellow--500: #{mix($color__white, $color__yellow,  0%)};
$color__yellow--550: #{mix($color__black, $color__yellow, 10%)};
$color__yellow--600: #{mix($color__black, $color__yellow, 20%)};
$color__yellow--650: #{mix($color__black, $color__yellow, 30%)};
$color__yellow--700: #{mix($color__black, $color__yellow, 40%)};
$color__yellow--750: #{mix($color__black, $color__yellow, 50%)};
$color__yellow--800: #{mix($color__black, $color__yellow, 60%)};
$color__yellow--850: #{mix($color__black, $color__yellow, 70%)};
$color__yellow--900: #{mix($color__black, $color__yellow, 80%)};
$color__yellow--950: #{mix($color__black, $color__yellow, 90%)};

:root {
  --color__white: #{meta.inspect($color__white)};
  --color__gray: #{meta.inspect($color__gray)};
  --color__black: #{meta.inspect($color__black)};
  --color__blue: #{meta.inspect($color__blue)};
  --color__green: #{meta.inspect($color__green)};
  --color__red: #{meta.inspect($color__red)};

  // Black
  --color__black--050: #{meta.inspect($color__black--050)};
  --color__black--100: #{meta.inspect($color__black--100)};
  --color__black--150: #{meta.inspect($color__black--150)};
  --color__black--200: #{meta.inspect($color__black--200)};
  --color__black--250: #{meta.inspect($color__black--250)};
  --color__black--300: #{meta.inspect($color__black--300)};
  --color__black--350: #{meta.inspect($color__black--350)};
  --color__black--400: #{meta.inspect($color__black--400)};
  --color__black--450: #{meta.inspect($color__black--450)};
  --color__black--500: #{meta.inspect($color__black--500)};
  --color__black--550: #{meta.inspect($color__black--550)};
  --color__black--600: #{meta.inspect($color__black--600)};
  --color__black--650: #{meta.inspect($color__black--650)};
  --color__black--700: #{meta.inspect($color__black--700)};
  --color__black--750: #{meta.inspect($color__black--750)};
  --color__black--800: #{meta.inspect($color__black--800)};
  --color__black--850: #{meta.inspect($color__black--850)};
  --color__black--900: #{meta.inspect($color__black--900)};
  --color__black--950: #{meta.inspect($color__black--950)};

  // Blue
  --color__blue--050: #{meta.inspect($color__blue--050)};
  --color__blue--100: #{meta.inspect($color__blue--100)};
  --color__blue--150: #{meta.inspect($color__blue--150)};
  --color__blue--200: #{meta.inspect($color__blue--200)};
  --color__blue--250: #{meta.inspect($color__blue--250)};
  --color__blue--300: #{meta.inspect($color__blue--300)};
  --color__blue--350: #{meta.inspect($color__blue--350)};
  --color__blue--400: #{meta.inspect($color__blue--400)};
  --color__blue--450: #{meta.inspect($color__blue--450)};
  --color__blue--500: #{meta.inspect($color__blue--500)};
  --color__blue--550: #{meta.inspect($color__blue--550)};
  --color__blue--600: #{meta.inspect($color__blue--600)};
  --color__blue--650: #{meta.inspect($color__blue--650)};
  --color__blue--700: #{meta.inspect($color__blue--700)};
  --color__blue--750: #{meta.inspect($color__blue--750)};
  --color__blue--800: #{meta.inspect($color__blue--800)};
  --color__blue--850: #{meta.inspect($color__blue--850)};
  --color__blue--900: #{meta.inspect($color__blue--900)};
  --color__blue--950: #{meta.inspect($color__blue--950)};

  // Green
  --color__green--050: #{meta.inspect($color__green--050)};
  --color__green--100: #{meta.inspect($color__green--100)};
  --color__green--150: #{meta.inspect($color__green--150)};
  --color__green--200: #{meta.inspect($color__green--200)};
  --color__green--250: #{meta.inspect($color__green--250)};
  --color__green--300: #{meta.inspect($color__green--300)};
  --color__green--350: #{meta.inspect($color__green--350)};
  --color__green--400: #{meta.inspect($color__green--400)};
  --color__green--450: #{meta.inspect($color__green--450)};
  --color__green--500: #{meta.inspect($color__green--500)};
  --color__green--550: #{meta.inspect($color__green--550)};
  --color__green--600: #{meta.inspect($color__green--600)};
  --color__green--650: #{meta.inspect($color__green--650)};
  --color__green--700: #{meta.inspect($color__green--700)};
  --color__green--750: #{meta.inspect($color__green--750)};
  --color__green--800: #{meta.inspect($color__green--800)};
  --color__green--850: #{meta.inspect($color__green--850)};
  --color__green--900: #{meta.inspect($color__green--900)};
  --color__green--950: #{meta.inspect($color__green--950)};

  // Red
  --color__red--050: #{meta.inspect($color__red--050)};
  --color__red--100: #{meta.inspect($color__red--100)};
  --color__red--150: #{meta.inspect($color__red--150)};
  --color__red--200: #{meta.inspect($color__red--200)};
  --color__red--250: #{meta.inspect($color__red--250)};
  --color__red--300: #{meta.inspect($color__red--300)};
  --color__red--350: #{meta.inspect($color__red--350)};
  --color__red--400: #{meta.inspect($color__red--400)};
  --color__red--450: #{meta.inspect($color__red--450)};
  --color__red--500: #{meta.inspect($color__red--500)};
  --color__red--550: #{meta.inspect($color__red--550)};
  --color__red--600: #{meta.inspect($color__red--600)};
  --color__red--650: #{meta.inspect($color__red--650)};
  --color__red--700: #{meta.inspect($color__red--700)};
  --color__red--750: #{meta.inspect($color__red--750)};
  --color__red--800: #{meta.inspect($color__red--800)};
  --color__red--850: #{meta.inspect($color__red--850)};
  --color__red--900: #{meta.inspect($color__red--900)};
  --color__red--950: #{meta.inspect($color__red--950)};

  // Yellow
  --color__yellow--050: #{meta.inspect($color__yellow--050)};
  --color__yellow--100: #{meta.inspect($color__yellow--100)};
  --color__yellow--150: #{meta.inspect($color__yellow--150)};
  --color__yellow--200: #{meta.inspect($color__yellow--200)};
  --color__yellow--250: #{meta.inspect($color__yellow--250)};
  --color__yellow--300: #{meta.inspect($color__yellow--300)};
  --color__yellow--350: #{meta.inspect($color__yellow--350)};
  --color__yellow--400: #{meta.inspect($color__yellow--400)};
  --color__yellow--450: #{meta.inspect($color__yellow--450)};
  --color__yellow--500: #{meta.inspect($color__yellow--500)};
  --color__yellow--550: #{meta.inspect($color__yellow--550)};
  --color__yellow--600: #{meta.inspect($color__yellow--600)};
  --color__yellow--650: #{meta.inspect($color__yellow--650)};
  --color__yellow--700: #{meta.inspect($color__yellow--700)};
  --color__yellow--750: #{meta.inspect($color__yellow--750)};
  --color__yellow--800: #{meta.inspect($color__yellow--800)};
  --color__yellow--850: #{meta.inspect($color__yellow--850)};
  --color__yellow--900: #{meta.inspect($color__yellow--900)};
  --color__yellow--950: #{meta.inspect($color__yellow--950)};

  // Text colors
  --color__text--lighter: var(--color__black--400);
  --color__text--light: var(--color__black--500);
  --color__text--normal: var(--color__black--700);
  --color__text--dark: var(--color__black--800);
}
